<template>
  <div class="app-container home">
    <div
      style="
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
      "
    >
      <div style="margin-right: 12px;">
        <el-select
          v-model="queryParams.status"
          placeholder="请选择状态"
          clearable
        >
          <el-option
            v-for="dict in tabList"
            :key="dict.id"
            :label="dict.name"
            :value="dict.id"
          />
        </el-select>
      </div>
      <div>
        <el-date-picker
          style="width: 300px"
          v-model="timer"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>
      </div>
      <div style="margin-left: 18px">
        <el-button type="primary" icon="el-icon-search" @click="getdataList()"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
      </div>
    </div>
    <div
      style="
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 26px;
      "
    >
      <div>
        <span style="font-size: 18px">总收入：</span
        ><span style="font-size: 18px; color: green">{{
          data.totalPrice
        }}</span>
      </div>
      <div style="margin-left: 26px">
        <span style="font-size: 18px">总支出：</span
        ><span style="font-size: 18px; color: red">{{
          data.totalDsPrice
        }}</span>
      </div>
      <div style="margin-left: 26px">
        <span style="font-size: 18px">总利润：</span
        ><span style="font-size: 18px; color: green">{{
          data.totalProfit
        }}</span>
      </div>
    </div>
    <div style="text-align: center; margin-top: 36px">
      <el-table
        :data="data.statisticsList"
        border
        :header-cell-style="{
          backgroundColor: '#666fe8',
          color: 'white',
        }"
      >
        <!-- <el-table-column type="selection" width="55" align="center" /> -->
        <el-table-column
          label="渠道来源"
          align="center"
          prop="fromResource"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          label="金额"
          align="center"
          prop="price"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="打手金额"
          align="center"
          prop="dsPrice"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="利润"
          align="center"
          prop="profit"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="单量"
          align="center"
          prop="count"
          :show-overflow-tooltip="true"
        />
      </el-table>
    </div>
  </div>
</template>

<script>
import { getdataStatistics } from "@/api/dsOrder/order";
export default {
  name: "Index",
  data() {
    return {
      // 版本号
      version: "3.8.9",
      data: null,
      timer: [],
      queryParams: {
        startTime: null,
        endTime: null,
        status: null,
      },
      tabList: [
        { name: "未开始", id: "0" },
        { name: "代练中", id: "1" },
        { name: "已完成", id: "2" },
        { name: "已结算", id: "3" },
        { name: "已退款", id: "4" },
      ],
    };
  },
  created() {
    this.getdataList();
  },
  methods: {
    async getdataList() {
      if (this.timer && this.timer.length == 2) {
        this.queryParams.startTime = this.timer[0] + " 00:00:00";
        this.queryParams.endTime = this.timer[1] + " 23:59:59";
      } else {
        this.queryParams.startTime = "";
        this.queryParams.endTime = "";
      }
      const res = await getdataStatistics(this.queryParams);
      console.log("res", res);
      this.data = res.data;
    },
    goTarget(href) {
      window.open(href, "_blank");
    },
    resetQuery() {
      this.queryParams = {
        startTime: null,
        endTime: null,
        status: null,
      };
      this.timer = [];
      this.getdataList();
    },
  },
};
</script>

<style scoped lang="scss">
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}

::v-deep .el-button.el-button--primary {
  background-color: #666fe8;
  border: none;
  color: #fff;
}
</style>

